<template>
  <div class="img-input">

    <!--Sinputhe和上传按钮-->
    <div id="input-btn">
      <Input v-model="value" readonly disabled />
      <Button class="btn" :disabled="disabled" type="primary" @click="clickUploadImg" :style="{top: btn_top + 'px'}">选择图片</Button>
    </div>
    <div id="images">
      <div class="images">
        <img v-if="src !== ''" :src="src" />
        <img v-else src="./images/nopic.jpg" />
        <Icon v-if="!disabled" @click="deleteImageValue" class="delete-image-value" size="20" color="#ccc" type="md-close" />
      </div>
    </div>
    <!--Sinputhe和上传按钮-->

    <!--上传图片组件--><input style="display:none;" ref="uploadFile" @change="uploadFileChange" type="file" class="upload-file" accept="image/gif,image/jpeg,image/png" />

    <!--S选择图片区域-->
    <Modal id="select-modal" :z-index="1001" v-model="select_model" title="选择图片" :width="900" :mask-closable="false" @on-ok="confirm" @on-cancel="cancel">
      <!--S头部-->
      <div class="header" slot="header">
        <h2>选择图片</h2>
        <div class="control">
          <Button class="btn" type="primary">上传图片</Button>
          <input ref="upload-file" @change="uploadFileChange" type="file" class="upload-file" multiple accept="image/gif,image/jpeg,image/png" />
        </div>
      </div>
      <!--E头部-->

      <!--S内容-->
      <div class="list">
        <!--        <div class="li" :style="{'background-image':'url(https://www.baidu.com/img/bd_logo1.png)'}" @mouseenter="liEnter" @mouseleave="liLeave" @click="liClick">-->
        <!--          <p class="name" @click="nameClick">图片名字图片名字图片名字图片名字</p>-->
        <!--          <Icon @click="deleteImage" class="delete-image" type="ios-trash" size="22" color="#fff"/>-->
        <!--          <div class="selected" @click="clickSelected"></div>-->
        <!--        </div>-->

        <div v-for="item in list.list" :key="item.id" class="li" :style="{'background-image':'url('+item.src+')'}" @mouseenter="liEnter" @mouseleave="liLeave" :data-attachment="item.attachment" @click="liClick">
          <p class="name">{{item.filename}}</p>
          <Icon @click.stop="deleteImage(item.id)" class="delete-image" type="ios-trash" size="22" color="#fff"/>
          <div class="selected" :data-attachment="item.attachment" @click.stop="clickSelected"></div>
        </div>

        <div id="page" v-if="list.total > list.page_size"><Page class="page" :total="list.total" :current="list.page+1" :page-size="list.page_size" @on-change="pageChange"></Page></div>
      </div>
      <!--E内容-->
    </Modal>
    <!--E选择图片区域-->

  </div>
</template>

<script>
import { upload } from '@/libs/url.js'
export default {
  name: 'ImgInput',
  data () {
    return {
      // 数据
      src: '', // 选择图片的地址
      // 选择图片区域
      select_model: false, // 显示状态
      // 图片列表
      list: {
        list: [], // 列表
        total: 0, // 总数
        page: 0, // 当前页码
        page_size: 10 // 一页显示数量
      },
      // 选择的图片列表
      select: []
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    // 选择图片按钮top值
    btn_top: {
      type: Number,
      default: 33
    },
    // 是否可点击选择图片按钮
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value () {
      if (this.value !== '') {
        this.getSrc()
      } else {
        this.src = ''
      }
    }
  },
  created () {
    if (this.value !== '') this.getSrc()
  },
  methods: {
    // 获取图片的地址
    getSrc () {
      this.$get('imageInput/getSrc', {
        path: this.value
      })
        .then((res) => {
          if (res.data.status === 'success') {
            this.src = res.data.data
          } else {
            console.error('获取src地址失败')
          }
        })
    },
    // 删除当前图片value
    deleteImageValue () {
      this.$emit('remove')
    },
    // 鼠标移入图片列表li
    liEnter (event) {
      event.target.style.borderColor = '#2D8CF0'
      event.target.querySelector('.delete-image').style.display = 'block'
    },
    // 鼠标移出图片列表li
    liLeave (event) {
      event.target.style.borderColor = '#fff'
      event.target.querySelector('.delete-image').style.display = 'none'
    },
    // 点击li列表
    liClick (event) {
      event.target.querySelector('.selected').style.display = 'block'
      this.select.push(event.target.getAttribute('data-attachment'))
    },
    // 点击选中的遮罩层
    clickSelected (event) {
      event.target.style.display = 'none'
      for (let i = 0; i < this.select.length; i++) {
        if (this.select[i] === event.target.getAttribute('data-attachment')) {
          this.select.splice(i, 1)
          break
        }
      }
    },
    // 删除图片
    deleteImage (attachment_id) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除此图片吗?',
        'z-index': 3000,
        onOk: () => {
          this.$get('imageInput/deleteImg', {
            attachment_id
          })
            .then((res) => {
              if (res.data.status === 'success') {
                this.getTotal()
                this.getList()
              } else {
                this.$Message.error('删除失败')
              }
            })
        }
      })
    },
    // 点击了确认按钮
    confirm () {
      this.$emit('change', this.select[this.select.length - 1])
    },
    // 点击了取消按钮
    cancel () {
      console.log('取消')
    },
    // input=file组件change
    uploadFileChange (event) {
      let files = event.target.files
      for (let i = 0; i < files.length; i++) {
        let oFormData = new FormData()
        oFormData.append('file', files[i])
        upload('imageInput/uploadImg', oFormData)
          .then((res) => {
            if (res.data.status === 'success') {
              this.getTotal()
              this.getList()
            } else {
              this.$Message.error('上传失败')
            }
          })
      }
    },
    // 点击上传图片按钮
    clickUploadImg () {
      this.select_model = true
      let class_select = document.querySelectorAll('#select-modal .selected')
      if (class_select.length > 0) {
        class_select.forEach((item) => {
          item.style.display = 'none'
        })
      }
      this.select = [this.value]
      this.getTotal()
      this.getList()
    },
    // 获取列表总数
    getTotal () {
      this.$get('imageInput/getImgTotal')
        .then((res) => {
          if (res.data.status === 'success') {
            this.list.total = res.data.data
          }
        })
    },
    // 获取列表
    getList () {
      this.$get('imageInput/getImgList', {
        limit: [this.list.page * this.list.page_size, this.list.page_size]
      })
        .then((res) => {
          if (res.data.status === 'success') {
            this.list.list = res.data.data
            this.listSelect()
          } else {
            this.list.list = []
          }
        })
    },
    // 点击分页
    pageChange (page) {
      this.list.page = page - 1
      let class_select = document.querySelectorAll('#select-modal .selected')
      if (class_select.length > 0) {
        class_select.forEach((item) => {
          item.style.display = 'none'
        })
      }
      this.getList()
    },
    // 列表已选中的图片
    listSelect () {
      for (let i = 0; i < this.select.length; i++) {
        for (let j = 0; j < this.list.list.length; j++) {
          if (this.select[i] === this.list.list[j].attachment) {
            document.querySelectorAll('#select-modal .selected')[j].style.display = 'block'
          }
        }
      }
    }
  }
}
</script>

<style scoped>
  .loading-spin{
    position:fixed;
    top:60px;
  }
  #input-btn{
    position: relative;
    width:100%;
  }
  #input-btn .btn{
    position:absolute;
    right:0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  #images{
    width:100%;
    margin-top: 10px;
  }
  #images .images{
    position: relative;
    width:150px;
    min-height:1px;
    max-height:1000px;
    border:1px solid #ccc;
    padding:5px;
    box-sizing: border-box;
    border-radius: 5px;
  }
  #images .images img{
    width:100%;
    display: block;
  }
  #images .images .delete-image-value{
    position: absolute;
    top:0;
    right:-20px;
    cursor: pointer;
  }
  #select-modal h2{
    font-size:14px;
  }
  #select-modal .header{
    overflow: hidden;
  }
  #select-modal .control{
    position: relative;
    margin-top: 10px;
  }
  #select-modal .control .btn:nth-of-type(1){
    margin-right: 10px;
  }
  #select-modal .control .upload-file{
    position: absolute;
    left:0;
    width:80px;
    height:40px;
    background: red;
    opacity: 0;
    filter:alpha(opacity=0);
  }
  #select-modal .list .li{
    position:relative;
    display: inline-block;
    width:160px;
    height:160px;
    margin:0 17px 10px 0;
    border:2px solid #fff;
    background: #EEEEEE center center no-repeat;
    background-size:contain;
    cursor: pointer;
  }
  #select-modal .list .li:nth-of-type(5n){
    margin-right: 0;
  }
  #select-modal .li p.name{
    position: absolute;
    pointer-events: none;
    bottom:0;
    left:0;
    width:100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height:30px;
    line-height: 30px;
    padding:0 5px;
    color:#fff;
    background: rgba(0,0,0,0.5);
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
  }
  #select-modal .li .delete-image{
    position: absolute;
    z-index:20;
    top:0;
    right:0;
    background: #2D8CF0;
    display:none;
  }
  #select-modal .li .selected{
    position: absolute;
    z-index:10;
    width:100%;
    height:100%;
    text-align: center;
    line-height: 160px;
    background: rgba(0,0,0,0.6);
    display: none;
  }
  #select-modal .li .selected::after{
    content:'';
    background: url('./images/selected-icon.png') center center no-repeat;
    display: block;
    width: 100%;
    height:100%;
    background-size:30% 30%;
  }
  #page{
    height:20px;
  }
  #page .page{
    float: right;
  }
</style>
